<template>
	<view class="content">
		<view class="tophaderbg">
			<my-headerbg @instruct="handinstruct" :instruct="instruct" :imageshow="imageshow"></my-headerbg>
		</view>
		<scroll-view scroll-y="true" class="ScrollView">
			<image class="topdaohang" :src="proxy.serverimageUrl + 'shenqing/daohangye2.png'" mode=""></image>
			<uni-forms label-position="left" border :model="form" :rules="rules" ref="formRef" label-width="140">

				<view class="formitem" style="padding-bottom: 20rpx;">
					<uni-forms-item required name="enterpriseNature">
						<view class="form-item">
							<view class="item-label">
								企业性质
							</view>
							<view class="item-btnBox">
								<view :class="[Educationalnum == item.cid ? 'btnitemact':'btnitem']"
									@click.stop="Educationalchange(item,index)"
									v-for="(item,index) in GetConditiondata.enterpriseNatures" :key="index">
									{{item.content}}
								</view>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item @tap="popshowchange" required label="所属行业" name="industrytext">
						<uni-easyinput  :clearable="false" suffixIcon="right" primaryColor="#FFFFFF" type="text"
							v-model="form.industrytext" placeholder="请选择" disabled disableColor="#FFFFFF"
							:inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item required label="主营业务" name="mainBusiness">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text" v-model="form.mainBusiness"
							placeholder="请输入" :inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item required label="营业执照注册号" name="businessNo">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text" v-model="form.businessNo"
							placeholder="请输入" :inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item required label="企业组织代码" name="enterpriseCode">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text"
							v-model="form.enterpriseCode" placeholder="请输入" :inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item required label="注册资金" name="registeredCapital">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text"
							v-model="form.registeredCapital" placeholder="万元" :inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item required label="固定资产总额" name="fixedTotalAssets">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text"
							v-model="form.fixedTotalAssets" placeholder="万元" :inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item required label="上年度销售收入" name="lastSalesRevenue">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text"
							v-model="form.lastSalesRevenue" placeholder="万元" :inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item required label="上年度纳税额" name="lastPayTaxes">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text" v-model="form.lastPayTaxes"
							placeholder="万元" :inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item required label="公司网址" name="companyWebsite">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text"
							v-model="form.companyWebsite" placeholder="请输入" :inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item required label="员工人数" name="staffNumber">
						<uni-easyinput :clearable="false" primaryColor="#FFFFFF" type="text" v-model="form.staffNumber"
							placeholder="请输入员工人数" :inputBorder="false"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item required name="companyEligibles">
						<view class="Enterprisecomplywith">
							<view class="top-head">
								<view class="label-icon">
									多选题
								</view>
								<view class="top-head-text">
									您的企业符合下列哪些条件？
								</view>
							</view>
							<view class="content-check">
								<view class="content-check-item" :class="[item.checked ? 'content-check-itemact'
									: 'content-check-item']" @click="checkchange(0,item,index)"
									v-for="(item,index) in GetConditiondata.companyEligibles" :key="index">
									<view class="leftcheckbox">
										<image v-show="item.checked" :src="proxy.serverimageUrl + 'shenqing/check.png'" mode="">
										</image>
									</view>
									<view class="checkright">
										{{item.content}}
									</view>
								</view>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item required name="personalEligibles">
						<view class="Personalcompliance">
							<view class="top-head">
								<view class="label-icon">
									多选题
								</view>
								<view class="top-head-text">
									您符合下列哪些条件？？
								</view>
							</view>
							<view class="content-check">
								<view class="content-check-item" :class="[item.checked ? 'content-check-itemact'
								: 'content-check-item']" @click="checkchange(1,item,index)"
									v-for="(item,index) in GetConditiondata.personalEligibles" :key="index">
									<view class="leftcheckbox">
										<image v-show="item.checked" :src="proxy.serverimageUrl + 'shenqing/check.png'" mode="">
										</image>
									</view>
									<view class="checkright">
										{{item.content}}
									</view>
								</view>
							</view>
						</view>
					</uni-forms-item>
				</view>
				<up-popup closeable :customStyle='customStyle' :show="popupHobbyshow" :round="10" mode="bottom"
					@close="popupHobbyclose">
					<view class="form-item">
						<view class="item-btnBox">
							<view :class="[item.checked ? 'btnitemact':'btnitem']" @click.stop="hobbieschange(item)"
								v-for="(item,index) in GetConditiondata.industrys" :key="index">
								{{item.content}}
							</view>
						</view>
					</view>
					<view class="" style="margin-top:20rpx">
						<up-button text="确定" @click="determinehobbies" color="#2854B7">
						</up-button>
					</view>
				</up-popup>
					
			</uni-forms>

			<view style="height: 45rpx;background: #F4F5F8;">

			</view>
		</scroll-view>
		<up-modal :show="modalshow" cancelText="坚持退出" confirmText='继续填写' showCancelButton @cancel="modelcancel" @confirm="modalconfirm"
			:content='modalcontent'></up-modal>
		<view class="bottom-btn">
			<view class="btnbox">
				<view class="btn">
					<up-button text="上一步" @click="Back" color="#D4E1FE"></up-button>
				</view>
				<view class="btn">
					<up-button @click="submit" text="下一步" color="#2854B7"></up-button>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue';
	import {
		getCondition,
		modifyMember,
		getMemberByOpenid
	} from '../../utils/api.js'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	const openid = uni.getStorageSync('openid')
	onLoad(() => {
		GetCondition()
	})
	onReady(() => {
		formRef.value.setRules(rules);
	})
	const Back = () =>{
		uni.navigateBack()
	}
	const modalshow = ref(false)
	const modalcontent = ref('信息未保存是否继续填写')
	const customStyle = {
		'width': '600rpx',
		'height': '1350rpx',
		'paddingTop': '68rpx',
		'paddingLeft': '45rpx',
		'paddingRight': '45rpx',
		'paddingBottom': '20rpx'
	}
	const popupHobbyshow = ref(false)
	const hobbieschange = (item) => {
		item.checked = !item.checked
	}
	const popshowchange = () =>{
		form.value.industrytext = []
		form.value.industries = []
		popupHobbyshow.value = true
	}
	/*用于头部组件返回事件*/
	const instruct = ref('back')
	const handinstruct = (instruct) => {
		switch (instruct) {
			// 返回
			case 'back':
				modalshow.value = true
				break;
		}
	}
	const modalconfirm = () =>{
		submit()
	}
	const modelcancel = () =>{
		uni.switchTab({
			url:'/pages/Mypage/index'
		})
	}
	/*兴趣爱好弹框*/
	const popupHobbyclose = () => {
		popupHobbyshow.value = false
		GetConditiondata.value.industrys.map(item => {
			item.checked = false
		})
	}
	/*选择兴趣爱好*/
	const determinehobbies = () => {
		form.value.industries = []
		GetConditiondata.value.industrys.map(item => {
			if (item.checked) {
				form.value.industries.push(item.cid)
				form.value.industrytext.push(item.content)
				popupHobbyshow.value = false
			}
		})
		if (form.value.industries.length == 0) {
			uni.showToast({
				icon: 'error',
				title: '请至少选择一项'
			})
			return
		}
	}
	const getMember = () => {
		let params = {
			openid,
			type: 2
		}
		getMemberByOpenid(params).then(res => {
			if (res.data.mid) {
				form.value = res.data
				Educationalnum.value = res.data.enterpriseNature
				form.value.industrytext = res.data.industryContent
				// GetConditiondata.value.industrys.map((item, index) => {
				// 	if (res.data.industries[index] == item.cid) {
				// 		form.value.industrytext.push(item.content)
				// 		// form.value.hobbys.push(item.cid)
				// 		item.checked = true
				// 	}
				// })
				GetConditiondata.value.personalEligibles.map((item,index)=>{
					res.data.personalEligibles.map((t)=>{
						if(t == item.cid){
							item.checked = true
						}
					})
					
				})
				GetConditiondata.value.companyEligibles.map((item,index)=>{
					res.data.companyEligibles.map((t)=>{
						if(t == item.cid){
							item.checked = true
						}
					})
				})
				console.log(form.value)
			}
		})
	}
	const submit = () => {
		let params = {
			...form.value,
			mid:uni.getStorageSync('mid')
		}
		formRef.value.validate().then(valid => {
			if (valid) {
				modifyMember(params).then(res => {
					if(res.code == 200){
						setTimeout(() => {
							uni.showToast({
								title: '操作成功',
								duration: 1000,
								icon: 'success'
							})
							setTimeout(() => {
								uni.hideToast();
								uni.navigateTo({
									url:'/subpages/applyfor/Information'
								})
							}, 1000)
						}, 0)
					}
				})
			} else {
				uni.$u.toast('校验失败')
			}
		}).catch(() => {
			// 处理验证错误  
			uni.$u.toast('校验失败')
		});

	}
	const columns = ref([])
	/*请求接口查询数据*/
	const GetConditiondata = ref({})
	const GetCondition = () => {
		getCondition().then(res => {
			res.data.hobbys.map(item => {
				item.checked = false
			})
			res.data.companyEligibles.map(item => {
				item.checked = false
			})
			res.data.personalEligibles.map(item => {
				item.checked = false
			})
			GetConditiondata.value = res.data
			// columns.value.push(res.data.industrys)
			getMember()
		})
	}
	const imageshow = ref(1)
	const enterprisechecklist = ref([{
			title: '正常运营两年（含）以上，发展状况良好',
			id: 1,
			checked: false
		},
		{
			title: '年纳税50万元以上',
			id: 2,
			checked: false
		},
		{
			title: '年度销售收入1000万元以上',
			id: 3,
			checked: false
		},
		{
			title: '获得1项地级以上政府部门或相同等权威社会组织的荣誉表彰',
			id: 4,
			checked: false
		},
		{
			title: '近三年向社会公益组织捐赠价值平均超10万（含）',
			id: 5,
			checked: false
		},
	])
	const labelStyle = ref({
		'fontSize': '15rpx',
		'fontWeight': '400',
		'color': '#252525'
	})
	const datetimeshow = ref(false)
	const datetime = ref(Date.now())
	// 使用 reactive 创建响应式状态  
	const form = ref({
		enterpriseNature: '',
		industrytext: '',
		industries:[],
		mainBusiness: '',
		businessNo: '',
		enterpriseCode: '',
		registeredCapital: '',
		fixedTotalAssets: '',
		lastSalesRevenue: '',
		lastPayTaxes: '',
		companyWebsite: '',
		staffNumber: '',
		companyEligibles: [],
		personalEligibles: [],
	});
	// 校验规则
	const rules = {
		enterpriseNature: {
			rules: [{
				required: true,
				errorMessage: '请选择企业性质'
	
			}]
		},
		industrytext: {
			rules: [{
				required: true,
				errorMessage: '请选择所属行业'
			
			}]
		},
		mainBusiness: {
			rules: [{
				required: true,
				errorMessage: '请输入主营业务'
			
			}]
		},
		businessNo: {
			rules: [{
				required: true,
				errorMessage: '请输入营业执照注册号'
			
			}]
		},
		enterpriseCode: {
			rules: [{
				required: true,
				errorMessage: '请输入企业组织代码'
			
			}]
		},
		registeredCapital: {
			rules: [{
				required: true,
				errorMessage: '请输入注册资金'
			
			}]
		},
		fixedTotalAssets: {
			rules: [{
				required: true,
				errorMessage: '请输入固定资产总额'
			
			}]
		},
		lastSalesRevenue: {
			rules: [{
				required: true,
				errorMessage: '请输入上年度销售收入'
			
			}]
		},
		lastPayTaxes: {
			rules: [{
				required: true,
				errorMessage: '请输入上年度纳税额'
			
			}]
		},
		companyWebsite: {
			rules: [{
				required: true,
				errorMessage: '请输入公司网址'
			
			}]
		},
		staffNumber: {
			rules: [{
				required: true,
				errorMessage: '请输入员工人数'
			
			}]
		},
		companyEligibles: {
			rules: [{
				required: true,
				errorMessage: '请选择条件'
			
			}]
		},
		personalEligibles: {
			rules: [{
				required: true,
				errorMessage: '请选择条件'
			}]
		},
	} 
	const checkboxgroupchange = (e) => {
		console.log(e);
	}
	const checkchange = (type, item, index) => {
		item.checked = !item.checked
		if (type == 0 && item.checked) {
			form.value.companyEligibles.push(item.cid)
		} else if(type == 1 && item.checked){
			form.value.personalEligibles.push(item.cid)
		}else if(type == 0 && !item.checked){
			form.value.companyEligibles.map((t,i)=>{
				if(item.cid == t){
					form.value.companyEligibles.splice(i,1)
				}
			})
		}else if(type == 1 && !item.checked){
			form.value.personalEligibles.map((t,i)=>{
				if(item.cid == t){
					form.value.personalEligibles.splice(i,1)
				}
			})
		}
		console.log(form.value.companyEligibles)
		console.log(form.value.personalEligibles)
	}
	const fileList = ref([]);
	const Educationalnum = ref(null)
	const Educationalchange = (item,index) => {
		Educationalnum.value = item.cid
		form.value.enterpriseNature = item.cid
	}
	const formRef = ref(null);
</script>

<style scoped lang="scss">
	.content {
		background: #F4F5F8;
		width: 750rpx;
		height: 100vh;
		padding-top: 284rpx;

		::v-deep .u-popup__content {
			.form-item {
				// margin-top: 42rpx;
				width: 660rpx;
		
				.item-btnBox {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;
					
					.btnitem {
						margin-top: 28rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						// width: 200rpx;
						// height: 82rpx;
						padding: 10rpx 20rpx;
						background: #F4F5F8;
						border-radius: 4rpx;
						border: 1px solid #F4F5F8;
					}
		
					.btnitemact {
						margin-top: 28rpx;
						padding: 10rpx 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						// width: 200rpx;
						// height: 82rpx;
						background: #E6EEFF !important;
						border: 1px solid #2854B7 !important;
						color: #2854B7 !important;
					}
				}
			}
		
			.uni-easyinput {
				margin-top: 30rpx;
				border-radius: 20rpx;
		
				.uni-easyinput__content {
					background-color: #F4F5F8 !important;
					height: 104rpx;
				}
		
			}
		}

		.tophaderbg {
			position: absolute;
			top: 0;
			z-index: 2;
		}

		.ScrollView {
			position: relative;
			z-index: 3;
			box-sizing: border-box;
			padding: 0 40rpx;
			height: calc(100vh - 435rpx);

			.topdaohang {
				width: 100%;
				height: 150rpx;
				margin-bottom: -24rpx;
			}

			::v-deep .uni-forms {
				.uni-forms-item {
					.uni-forms-item__label {
						padding: 0;
					}

					.uni-forms-item__content {
						.uni-easyinput {
							.uni-easyinput__content {
								text-align: right;
								background-color: #FFFFFF !important;

								.uni-icons {
									font-size: 28rpx !important;
								}
							}
						}

						.uni-forms-item__error {
							text-align: right;
							left: -20rpx !important;
							right: 20rpx !important;
						}
					}
				}
			}

			.formitem {
				background: #FFFFFF;
				padding: 47rpx 36rpx;
				border-radius: 20rpx;



				.form-item {
					// margin-top: 42rpx;

					.cardbox {
						margin-top: 29rpx;
						width: 600rpx;
						height: 160rpx;
						background: #F4F5F8;
						border-radius: 16rpx;
						display: flex;
						padding: 44rpx 35rpx;
						align-items: center;
						justify-content: space-between;

						.cardbox-left {
							.p1 {
								font-family: Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 30rpx;
								color: #252525;
							}

							.p2 {
								margin-top: 15rpx;
								font-family: Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 30rpx;
								color: #2854B7;
							}
						}

						.cardbox-right {
							image {
								width: 35rpx;
								height: 34rpx;
							}
						}
					}

					.topBox {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.topBox-label {
							font-family: Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 30rpx;
							color: #252525;
						}

						.topBox-add {
							display: flex;
							align-items: center;

							image {
								width: 28rpx;
								height: 28rpx;
							}

							.topBox-text {
								font-family: Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 28rpx;
								color: #2854B7;
							}
						}
					}

					.item-label {
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 30rpx;
						color: #252525;
					}

					.item-btnBox {
						display: flex;
						align-items: center;
						justify-content: space-between;
						flex-wrap: wrap;

						.btnitem {
							margin-top: 28rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							width: 185rpx;
							height: 82rpx;
							background: #F4F5F8;
							border-radius: 4rpx;
							font-family: Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: #050101;
						}

						.btnitemact {
							margin-top: 28rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-family: Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: #2854B7;
							width: 185rpx;
							height: 82rpx;
							background: #E6EEFF !important;
							border: 1px solid #2854B7 !important;
							color: #2854B7 !important;
						}
					}
				}

				::v-deep .u-upload__wrap {
					justify-content: flex-end;
				}

				::v-deep .u-input__content__field-wrapper__field {
					text-align: right !important;
				}
			}

			.top-head {
				display: flex;
				align-items: center;

				.label-icon {
					width: 90rpx;
					height: 42rpx;
					background: #EBF1FF;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #2854B7;
				}

				.top-head-text {
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 30rpx;
					margin-left: 12rpxz;
					color: #252525;
				}
			}

			.content-check {
				.content-check-item {
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					padding: 32rpx 27rpx;
					background: #F4F5F8;
					border-radius: 4rpx;
					border: 1rpx solid #F4F5F8;

					.leftcheckbox {
						width: 34rpx;
						height: 34rpx;
						border-radius: 4rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border: 2rpx solid #BBC0CA;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.checkright {
						width: 474rpx;
						margin-left: 23rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 26rpx;
						color: #252525;
					}
				}

				.content-check-itemact {
					background: #F1F5FF;
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					padding: 32rpx 27rpx;
					border-radius: 4px;
					border: 1px solid #2854B7;
				}
			}

			.Enterprisecomplywith {
				background: #FFFFFF;
				border-radius: 20rpx;
				// padding: 44rpx 35rpx;
			}

			.Personalcompliance {
				background: #FFFFFF;
				border-radius: 20rpx;
				// padding: 44rpx 35rpx;
			}
		}

		.bottom-btn {
			position: fixed;
			bottom: 40rpx;
			left: 40rpx;
			// z-index: 10;
			width: 670rpx;
			height: 110rpx;
			border-radius: 20rpx;

			.btnbox {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.btn {
					width: 325rpx;
					height: 110rpx;
				}
			}
		}
	}
</style>